<template>
  <div class="monitor-box">
    <CardBox title="物种丰富度"> </CardBox>
    <div class="content-container">
      <div class="statistics-chart" ref="speciesChart"></div>
    </div>
  </div>
</template>
<script>
import CardBox from "@/components/Global/CardBox.vue";
import {EventBus} from "../../utils/event-bus";
import * as echarts from "echarts";

export default {
  name: "Introduce",
  components: {
    CardBox,
  },
  data() {
    return {
      introduce:'',
    };
  },
  created() {
    EventBus.$on('set-multi-introduce', (message) => {
      this.introduce=message;
    });
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.speciesChart
      if (!chartDom) return

      const chart = echarts.init(chartDom,'dark')
      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,24,106,0.8)',
          borderColor: 'rgba(0,150,255,0.3)',
          textStyle: {
            color: '#fff',
            fontFamily: 'DIN Pro'
          }
        },
        legend: {
          data: ['兽类','鸟类'],
          textStyle: {
            color: '#fff',
            fontFamily: 'DIN Pro'
          },
          top: 10,
          right: 10
        },
        grid: {
          top: '15%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2025年1月','2025年2月','2025年3月','2025年4月','2025年5月','2025年6月','2025年7月','2025年8月'],
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisLabel: {
            color: '#fff',
            fontFamily: 'DIN Pro'
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisLabel: {
            color: '#fff',
            fontFamily: 'DIN Pro'
          }
        },
        series: [
          {
            name: '兽类',
            type: 'line',
            data: [3,3,3,2,2,3,3,2],
            lineStyle: {
              color: '#3DD78C'
            },
            itemStyle: {
              color: '#3DD78C'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(61,215,140,0.3)'
                }, {
                  offset: 1,
                  color: 'rgba(61,215,140,0)'
                }]
              }
            },
            smooth: true
          },
          {
              name: '鸟类',
              type: 'line',
              data: [10,8,11,7,8,6,8,5],
              lineStyle: {
                  color: '#d73085'
              },
              itemStyle: {
                  color: '#D73085'
              },
              areaStyle: {
                  color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                          offset: 0,
                          color: 'rgba(61,215,140,0.3)'
                      }, {
                          offset: 1,
                          color: 'rgba(61,215,140,0)'
                      }]
                  }
              },
              smooth: true
          }
        ]
      }

      chart.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>

.statistics-chart {
  width: 100%;
  height: 100%;
}
  .content-container{
    height: 380px;
  }
</style>